<template>
  <div class="text-data-results page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="file-alt" class="header-icon"></icon>
          <span class="header-title">文本筛选结果</span>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="goBack">返回</el-button>
            <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
          </div>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <!-- 左侧内容区域 -->
              <div class="left-content">
                <!-- 整体文本数据情况 -->
                <div class="data-overview">
                  <h3 class="section-title">整体文本数据情况</h3>
                  <div class="filter-row">
                    <span class="filter-label">筛选条件：</span>
                    <el-select v-model="currentClass" placeholder="一班" size="small">
                      <el-option label="一班" value="一班"></el-option>
                      <el-option label="二班" value="二班"></el-option>
                      <el-option label="三班" value="三班"></el-option>
                    </el-select>
                  </div>

                  <!-- 学生数据表格 -->
                  <div class="student-table">
                    <el-table :data="studentData" size="small" border style="width: 100%">
                      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                      <el-table-column prop="class" label="班级" width="80"></el-table-column>
                      <el-table-column prop="count" label="文本数量" width="80"></el-table-column>
                      <el-table-column prop="major" label="专业"></el-table-column>
                      <el-table-column prop="emotionAnalysis" label="情感分析结果"></el-table-column>
                    </el-table>
                  </div>
                </div>

                <!-- 智能文本内容总结 -->
                <div class="text-summary">
                  <h3 class="section-title">智能文本内容总结</h3>
                  <div class="summary-content">
                    <p>{{ textSummary }}</p>
                  </div>
                </div>

                <!-- 词云图 -->
                <div class="word-cloud">
                  <h3 class="section-title">词云图</h3>
                  <div class="cloud-container">
                    <div class="keyword-cloud">
                      <div v-for="(keyword, index) in keywordList" :key="index"
                        class="keyword-item" :style="{ fontSize: (keyword.weight * 3 + 12) + 'px' }">
                        {{ keyword.text }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧内容区域 -->
              <div class="right-content">
                <!-- 个人文本数据筛选 -->
                <div class="personal-filter">
                  <h3 class="section-title">个人文本数据筛选</h3>
                  <div class="filter-form">
                    <div class="form-row">
                      <div class="form-item">
                        <label>姓名</label>
                        <el-input v-model="personalFilter.name" size="small" placeholder="李四"></el-input>
                      </div>
                      <div class="form-item">
                        <label>班级</label>
                        <el-input v-model="personalFilter.class" size="small" placeholder="三班"></el-input>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-item">
                        <label>学号</label>
                        <el-input v-model="personalFilter.studentId" size="small" placeholder="20231003033"></el-input>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-item">
                        <label>文本写作时间</label>
                        <el-date-picker v-model="personalFilter.date" type="date" size="small" placeholder="2023/10/15"></el-date-picker>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-item">
                        <label>文本写作主题</label>
                        <el-select v-model="personalFilter.theme" size="small" placeholder="自然与环保">
                          <el-option label="自然与环保" value="自然与环保"></el-option>
                          <el-option label="学习心得" value="学习心得"></el-option>
                          <el-option label="生活感悟" value="生活感悟"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="form-row">
                      <el-button type="primary" @click="handlePersonalFilter">筛选</el-button>
                    </div>
                  </div>
                </div>

                <!-- 个人文本展示 -->
                <div class="personal-text-display">
                  <h3 class="section-title">个人文本展示</h3>
                  <div class="text-content">
                    <p>{{ personalTextContent }}</p>
                  </div>
                </div>

                <!-- 结构化数据展示栏 -->
                <div class="structured-data">
                  <h3 class="section-title">结构化数据展示栏</h3>
                  <div class="data-note">
                    <p>{{ structuredDataNote }}</p>
                  </div>
                  <div class="chart-container" v-if="showStructuredChart">
                    <div ref="emotionChart" class="emotion-chart"></div>
                  </div>
                </div>
              </div>

              <!-- 底部内容区域 -->
              <div class="bottom-content">
                <div class="emotion-analysis">
                  <div class="analysis-header">
                    <div class="pagination">
                      <el-button size="mini" icon="el-icon-arrow-left">上一篇</el-button>
                      <span class="page-info">2/5</span>
                      <el-button size="mini" icon="el-icon-arrow-right">下一篇</el-button>
                    </div>
                    <h3 class="section-title">文本情感判断：积极</h3>
                  </div>
                  <div class="analysis-content">
                    <p>{{ emotionAnalysisContent }}</p>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'TextDataResults',
  data() {
    return {
      filterParams: {},
      // 班级筛选
      currentClass: '一班',

      // 学生数据表格
      studentData: [
        { name: '张三', class: '一班', count: 2, major: '电子工程', emotionAnalysis: '积极、乐观、目标明确' },
        { name: '王五', class: '二班', count: 3, major: '机械工程', emotionAnalysis: '积极、自信、焦虑' },
        { name: '李四', class: '三班', count: 1, major: '通信工程', emotionAnalysis: '中性、理性、稳重' }
      ],

      // 智能文本内容总结
      textSummary: '80%的学生文本内容体现出积极向上的心态，学生普遍在校园中表现为积极人格特质，20%的学生对学习的困惑，以及对未来的焦虑。15%为中性内容，主要体现在日常生活记录，王老师引导下的交流活动，使学生对自我认知有了更深的了解，并表现出更加积极的心态，从而形成良好的自我调节能力，促进心理健康发展。',

      // 词云图数据
      keywordList: [
        { text: '学习', weight: 5 },
        { text: '生活', weight: 4.5 },
        { text: '未来', weight: 4 },
        { text: '目标', weight: 3.5 },
        { text: '压力', weight: 3 },
        { text: '成长', weight: 2.5 },
        { text: '朋友', weight: 2 },
        { text: '家庭', weight: 1.5 },
        { text: '兴趣', weight: 1 },
        { text: '挑战', weight: 1 }
      ],

      // 个人文本数据筛选
      personalFilter: {
        name: '',
        class: '',
        studentId: '',
        date: '',
        theme: ''
      },

      // 个人文本展示
      personalTextContent: '暂无个人文本内容，请使用筛选功能查找特定学生的文本。',

      // 结构化数据展示
      structuredDataNote: '如果选择详细展示结构化数据，学生成绩将展示一个图，没有的话就显示个人文本展示一栏并列右侧',
      showStructuredChart: true,

      // 情感分析内容
      emotionAnalysisContent: '对该学生表现出积极乐观的心态，积极情绪占比75%，多表于家庭与自我提升的话题，对学校特别不适，"学习"和"考试"词列"负面"词组，体现出对知识的渴望，表情系及社交能力训练强，学习生活两不误，探讨学习方面二人核心观点，应该在适应期对学生元素成长的探索与思考。'
    }
  },
  created() {
    // 从路由查询参数中获取筛选条件
    this.filterParams = { ...this.$route.query };

    // 初始化图表
    this.$nextTick(() => {
      if (this.showStructuredChart) {
        this.initEmotionChart();
      }
    });
  },
  methods: {
    // 导航方法
    goBack() {
      this.$router.push('/text-data');
    },

    refreshData() {
      this.$message.success('数据已刷新');
      // 实际项目中应该调用API重新获取数据
      // this.fetchTextData();
    },

    // 移除筛选条件
    removeFilter(key) {
      this.$delete(this.filterParams, key);
      // 更新路由查询参数
      this.$router.replace({
        query: { ...this.filterParams }
      });
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      if (typeof date === 'string') {
        return date;
      }
      const d = new Date(date);
      return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
    },

    // 处理个人筛选
    handlePersonalFilter() {
      // 调用API获取个人文本数据
      this.fetchPersonalTextData(this.personalFilter);

      // 模拟API调用
      this.$message.success('筛选成功');
      if (this.personalFilter.name) {
        this.personalTextContent = `这是${this.personalFilter.name}的文本内容示例。学习生活充实而有意义，虽然有时会感到压力，但总体保持积极乐观的心态。希望未来能够在专业领域有所成就，为社会做出贡献。`;
      } else {
        this.personalTextContent = '请输入姓名进行筛选。';
      }
    },

    // 初始化情感分析图表
    initEmotionChart() {
      // 这里使用echarts初始化图表
      // 实际项目中应该引入echarts并正确初始化
      console.log('初始化情感分析图表');

      // 模拟图表初始化
      setTimeout(() => {
        const chartContainer = this.$refs.emotionChart;
        if (chartContainer) {
          // 这里应该是echarts的初始化代码
          // 由于当前环境可能没有echarts，所以只是模拟显示
          chartContainer.innerHTML = `
            <div style="width: 100%; height: 200px; display: flex; justify-content: center; align-items: center;">
              <div style="background-color: #4080ff; width: 50px; height: 100px; margin: 0 10px;"></div>
              <div style="background-color: #40a9ff; width: 20px; height: 40px; margin: 0 10px;"></div>
              <div style="background-color: #36cfc9; width: 10px; height: 20px; margin: 0 10px;"></div>
            </div>
            <div style="text-align: center; margin-top: 10px;">
              <span style="margin: 0 20px;">积极 82%</span>
              <span style="margin: 0 20px;">中性 15%</span>
              <span style="margin: 0 20px;">消极 3%</span>
            </div>
          `;
        }
      }, 100);
    },

    // 获取文本数据（API调用）
    fetchTextData() {
      // 实际项目中的API调用
      // this.$api.textData.getTextData(this.filterParams).then(res => {
      //   this.studentData = res.data.students;
      //   this.textSummary = res.data.summary;
      //   this.keywordList = res.data.keywords;
      // }).catch(err => {
      //   this.$message.error('获取数据失败: ' + err.message);
      // });
    },

    // 获取个人文本数据（API调用）
    fetchPersonalTextData(filterData) {
      // 实际项目中的API调用
      // this.$api.textData.getPersonalTextData(filterData).then(res => {
      //   this.personalTextContent = res.data.content;
      //   this.emotionAnalysisContent = res.data.emotionAnalysis;
      //   // 更新图表数据
      //   this.updateEmotionChart(res.data.emotionStats);
      // }).catch(err => {
      //   this.$message.error('获取个人数据失败: ' + err.message);
      // });

      // 使用参数以避免未使用变量警告
      console.log('获取个人文本数据，筛选条件:', filterData);
    }
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.text-data-results {
  .module-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .header-icon {
        font-size: 24px;
        color: #68d8fe;
        margin-right: 10px;
      }

      .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #68d8fe;
      }

      .header-actions {
        margin-left: auto;
        display: flex;
        gap: 10px;
      }
    }

    .module-content {
      flex: 1;

      .content-box {
        height: 100%;
        padding: 20px;
      }

      .content-wrapper {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
          "left-top right-top"
          "left-middle right-middle"
          "bottom bottom";
        gap: 20px;
        color: #d3d6dd;

        .left-content {
          grid-column: 1;
          grid-row: 1 / 3;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .data-overview {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .filter-row {
              display: flex;
              align-items: center;
              margin-bottom: 15px;

              .filter-label {
                margin-right: 10px;
              }
            }

            .student-table {
              margin-top: 15px;

              ::v-deep .el-table {
                background-color: transparent;
                color: #d3d6dd;

                th {
                  background-color: rgba(104, 216, 254, 0.1);
                  color: #68d8fe;
                  border-bottom: 1px solid rgba(104, 216, 254, 0.3);
                }

                td {
                  background-color: rgba(255, 255, 255, 0.05);
                  border-bottom: 1px solid rgba(104, 216, 254, 0.1);
                }

                tr:hover > td {
                  background-color: rgba(104, 216, 254, 0.1);
                }
              }
            }
          }

          .text-summary {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .summary-content {
              line-height: 1.6;

              p {
                margin-bottom: 10px;
              }
            }
          }

          .word-cloud {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .cloud-container {
              height: 200px;
              display: flex;
              justify-content: center;
              align-items: center;

              .keyword-cloud {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 10px;

                .keyword-item {
                  color: #68d8fe;
                  padding: 5px;
                  border-radius: 4px;
                  background-color: rgba(104, 216, 254, 0.1);
                  transition: all 0.3s;

                  &:hover {
                    background-color: rgba(104, 216, 254, 0.3);
                    transform: scale(1.05);
                  }
                }
              }
            }
          }
        }

        .right-content {
          grid-column: 2;
          grid-row: 1 / 3;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .personal-filter {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .filter-form {
              .form-row {
                display: flex;
                gap: 15px;
                margin-bottom: 15px;

                .form-item {
                  flex: 1;

                  label {
                    display: block;
                    margin-bottom: 5px;
                    font-size: 14px;
                  }
                }

                &:last-child {
                  justify-content: flex-end;
                }
              }
            }
          }

          .personal-text-display {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .text-content {
              min-height: 100px;
              line-height: 1.6;

              p {
                margin-bottom: 10px;
              }
            }
          }

          .structured-data {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h3.section-title {
              font-size: 18px;
              margin-bottom: 15px;
              color: #68d8fe;
            }

            .data-note {
              margin-bottom: 15px;
              font-size: 14px;
              color: #909399;
            }

            .chart-container {
              min-height: 200px;

              .emotion-chart {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .bottom-content {
          grid-column: 1 / 3;
          grid-row: 3;

          .emotion-analysis {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            .analysis-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;

              .pagination {
                display: flex;
                align-items: center;
                gap: 10px;

                .page-info {
                  font-size: 14px;
                }
              }

              h3.section-title {
                font-size: 18px;
                color: #68d8fe;
              }
            }

            .analysis-content {
              line-height: 1.6;

              p {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
